<template>
    <div class="vitual">
        <!--我需要只显示可视区域-->
        <!--1.告诉我的列表每一项多高 因为我要算出一个滚动条来-->
        <!-- 2.variable这个高度不确定多高 -->
        <VitualList :size="100" :remain="8" :items="items" :variable="true">
            <template v-slot="{ item}">
                <Item :item="item"/>
            </template>
        </VitualList>
    </div>
</template>
<script lang="ts" setup>
    import { ref } from 'vue'
    import VitualList from '@/components/vitual-list/index.vue'
    import Item from '@/components/vitual-list/item.vue'
    import Mock from 'mockjs'
    const items = ref<any[]>([])
    for (let i = 0; i < 10000; i++) {
        items.value.push({id: i, value: Mock.Random.sentence(5, 50)})
        
    }
</script>